<div class="outer-wrapper">
	<service-box></service-box>
	<div class="wrapper">
		<app-lazy-img src="{{headerImageUrl}}" alt="loklak Search - Distributed Open Source Search for Twitter and Social Media with Peer to Peer Technology"
			title="loklak Search - Distributed Open Source Search for Twitter and Social Media with Peer to Peer Technology" width="125" height="145"></app-lazy-img>

		<h1><span class="loklak">loklak</span>&nbsp;Search!</h1>

		<div class="search-form">

			<div class="search-input" [class.focused]="inputFocused">
					<input type="text" id="search" name="search" [formControl]="_queryControl" title="Search"
					(keypress)="onEnter($event)" (focus)="inputFocused=true" (focusout)="inputFocused=false"/>
					<button title="Search by voice" class="btn btn-default" id="speech-button" type="submit">
        				<a><img src="{{ configUrl.microphone.root }}" class="microphone" (click)="speechRecognition()"/></a>
			        </button>
			</div>
		</div>

		<div class="help-text">
			Use <span class="highlight">#hashtag</span>;&nbsp;
			<span class="highlight">"search text"</span> for exact matches;&nbsp;
			<span class="highlight">near:location</span> finds messages near a location;&nbsp;
			<span class="highlight">@user</span> finds user mentions;&nbsp;
			<span class="highlight">from:user</span> shows messages of a user;&nbsp;
			<span class="highlight">followers:user</span> find followers of a user.
		</div>

		<div class="top-hashtags" *ngIf="apiResponseHashtags$">
			<div class="top-list">
				<span>
					<div *ngIf="(apiResponseHashtags$ | async).length !== 0">
						<span *ngFor ="let item of ((apiResponseHashtags$ | async).slice(0,5));">
							<a [routerLink]="['/search']"
								[queryParams]="{ query : '#' + item.tag }">#{{item.tag}}</a>&nbsp;&nbsp;
						</span>
					</div>
				</span>
			</div>
			<div class="bottom-list">
				<span>
					<div *ngIf="(apiResponseHashtags$ | async).length !== 0">
						<span *ngFor ="let item of ((apiResponseHashtags$ | async).slice(6,10));">
							<a [routerLink]="['/search']"
								[queryParams]="{ query : '#' + item.tag }">#{{item.tag}}</a>&nbsp;&nbsp;
						</span>
					</div>
				</span>
			</div>
		</div>
	</div>
</div>
<app-footer></app-footer>
